<template>
  <div class="department w-full bg-white box-border">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/system/department' }"
        >部门管理</el-breadcrumb-item
      >
    </el-breadcrumb>
    <el-divider />
    <div class="flex w-full">
      <div
        class="flex-none p-3 border rounded-lg border-solid border-gray-300 overflow-y-auto box-border"
        style="width: 280px; margin-right: 20px; height: 660px"
      >
        <p class="mt-0 text-gray-600">部门机构</p>
        <el-input v-model="filterText" placeholder="输入关键字进行过滤">
        </el-input>
        <el-tree
          ref="treeRef"
          class="filter-tree mt-4"
          node-key="departmentId"
          :expand-on-click-node="false"
          :data="treeList"
          :current-node-key="treeKey"
          highlight-current
          :props="defaultProps"
          :filter-node-method="filterNode"
          default-expand-all
          @node-click="treeClick"
        >
        </el-tree>
      </div>
      <div class="w-full" style="max-height: 660px; width: calc(100% - 300px)">
        <div class="flex w-full box-border justify-between">
          <el-form :inline="true" :model="searchParams">
            <el-form-item label="部门名称">
              <el-input
                v-model="searchParams.name"
                placeholder="请输入部门名称"
              />
            </el-form-item>
            <el-form-item label="部门状态">
              <el-select
                v-model="searchParams.status"
                clearable
                placeholder="选择状态"
              >
                <el-option label="启用" :value="1" />
                <el-option label="禁用" :value="0" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onQuery">查询</el-button>
              <el-button @click="onClear">清空</el-button>
            </el-form-item>
          </el-form>
          <div class="button-group">
            <!-- <el-button
              type="primary"
              @click="
                $router.push({
                  path: 'department/add',
                  query: { parentId: treeKey },
                })
              "
              >新建部门</el-button
            > -->
          </div>
        </div>
        <div class="w-full box-border">
          <el-table
            :data="tableData.records"
            :header-cell-style="{ background: '#F4F4F4', color: '#000' }"
            border
            style="width: 100%"
            max-height="570"
          >
            <el-table-column prop="name" :align="'center'" label="部门名称" />
            <el-table-column
              prop="parentName"
              :align="'center'"
              label="上级部门"
              min-width="100"
            />
            <el-table-column
              prop="code"
              :align="'center'"
              label="部门编号"
              min-width="100"
            />
            <el-table-column
              prop="status"
              :align="'center'"
              label="部门状态"
              width="100"
            >
              <template #default="scope">
                <div>{{ scope.row.status === 1 ? '启用' : '禁用' }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="createByName"
              :align="'center'"
              label="创建人"
              width="80"
            />
            <el-table-column
              prop="createTime"
              :align="'center'"
              label="创建时间"
              width="170"
            />
          </el-table>
        </div>
        <div class="flex mt-4 w-full justify-end">
          <el-pagination
            v-show="tableData.total > 0"
            :current-page="searchParams.pageNum"
            :page-size="searchParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref, watch, onMounted } from 'vue';
  import {
    IDeptTreeItem,
    IDeptListResponse,
  } from '@/http/system/department/type';
  import { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type';
  import type { ElTree } from 'element-plus';
  // import { apiPageList, apiTreeList } from '@/http/system/department';
  // import { ElTree } from 'element-plus/es';
  const searchParams = reactive({
    name: '',
    status: '',
    pageNum: 1,
    pageSize: 10,
  });
  let filterText = ref('');
  let treeKey = ref(0);
  const defaultProps = reactive({
    children: 'child',
    label: 'name',
  });
  const treeRef = ref<InstanceType<typeof ElTree>>();
  let treeList: IDeptTreeItem[] = reactive([]);
  let tableData: IDeptListResponse = reactive({
    records: [],
    total: 0,
    current: 1,
  });
  watch(filterText, (val) => {
    treeRef.value?.filter(val);
  });
  onMounted(async () => {
    // await getTreeList();
  });

  //过滤Tree筛选
  const filterNode = (value: string, data: TreeNodeData) => {
    if (!value) return true;
    return data && data.name.includes(value);
  };
  // 部门树列表
  // const getTreeList = async () => {
  //   const res = await apiTreeList();
  //   let id = 0;
  //   if (res && res.length) {
  //     treeList.push(...res);
  //     id = treeList[0].departmentId;
  //   }
  //   getTableData(id);
  // };

  //获取右侧表格数据
  // const getTableData = async (id?: number): Promise<void> => {
  //   const res = await apiPageList({
  //     ...searchParams,
  //     parentId: id || treeKey.value || treeList[0].departmentId,
  //   });
  //   Object.assign(tableData, res);
  // };
  //分页size修改
  const handleSizeChange = (val: number): void => {
    searchParams.pageNum = 1;
    searchParams.pageSize = val;
    getTableData();
  };
  //分页-页数点击
  const handleCurrentChange = (val: number): void => {
    searchParams.pageNum = val;
    getTableData();
  };
  //左侧树部门点击
  const treeClick = (e: IDeptTreeItem): void => {
    treeKey.value = e.departmentId;
    searchParams.pageNum = 1;
    getTableData();
  };
  //根据筛选查询
  const onQuery = (): void => {
    searchParams.pageNum = 1;
    getTableData();
  };
  //清空筛选
  const onClear = (): void => {
    searchParams.status = '';
    searchParams.name = '';
    searchParams.pageNum = 1;
  };
</script>

<style lang="scss" scoped>
  .department {
    min-height: 100%;
    padding: 20px;
    .button-group {
      margin-bottom: 18px;
    }
    .filter-tree {
      :deep {
        .el-tree-node {
          &:first-child {
            .el-tree-node__content {
              // padding-left: 10px !important;
              .el-tree-node__expand-icon {
                color: #409eff;
                &.is-leaf {
                  color: transparent;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
